<html><head><style data-merge-styles="true"></style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
      integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
      crossorigin="anonymous"
    />
    <title>Safe Code</title>
    <style>
        .is {
            margin: 0;
            overflow: hidden;
            font-family: Roboto, 'Segoe UI', Tahoma, sans-serif;
            font-size: 81.25%;
        }
        @keyframes fade-in {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @keyframes slide-in {
            from {
                transform: translateX(var(--slide-in-length, 40px));
            }
            to {
                transform: translateX(0);
            }
        }
        .slide-in {
            animation: slide-in 200ms forwards ease;
            transform: translateX(30px);
        }
        .background {
            animation-delay: 275ms;
            height: 100%;
            left: 50%;
            min-height: 400px;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            z-index: -1;
        }
        .background>span {
            position: absolute;
        }
        @keyframes blue-circle-animation-x {
            50% {
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transform: translateX(44px);
            }
        }
        .blue-circle-container {
            animation: blue-circle-animation-x 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            left: calc(13% - 50px);
            top: calc(18% - 26px);
        }
        @keyframes blue-circle-animation-y {
            50% {
                animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1);
                transform: translateY(17px);
            }
        }
        .blue-circle-container::after {
            animation: blue-circle-animation-y 9s cubic-bezier(0.25, 0, 0.2, 1) infinite;
            background-color: rgb(26, 115, 232);
            content: ' ';
            height: 43px;
            position: absolute;
            width: 43px;
            border-radius: 50%;
        }
        @keyframes green-rectangle-animation {
            100% {
                transform: rotate(360deg);
            }
        }
        .green-rectangle {
            --green-rectangle: url('');
            -webkit-mask: var(--green-rectangle) no-repeat bottom right;
            mask: var(--green-rectangle) no-repeat bottom right;
            animation: green-rectangle-animation 40s infinite linear;
            background-color: rgb(49, 167, 83);
            bottom: 8%;
            content: ' ';
            height: 371px;
            right: -255px;
            width: 371px;
        }
        .grey-oval {
            background-color: rgb(241, 243, 244);
            bottom: calc(8% + 24px);
            height: 100px;
            mix-blend-mode: multiply;
            right: 48px;
            width: 100px;
            border-radius: 50%;
        }
        @keyframes grey-rounded-rectangle-animation {
            65% {
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transform: translateY(-48px) rotate(-75deg);
            }
        }
        .grey-rounded-rectangle {
            --grey-rounded-rectangle: url('');
            -webkit-mask: var(--grey-rounded-rectangle) no-repeat top left;
            mask: var(--grey-rounded-rectangle) no-repeat top left;
            animation: grey-rounded-rectangle-animation 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            background-color: rgb(241, 243, 244);
            height: 132px;
            left: -42px;
            top: 45%;
            width: 132px;
        }
        @keyframes red-triangle-animation {
            50% {
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transform: translateY(25px) rotate(-53deg);
            }
        }
        .red-triangle {
            --red-triangle: url('');
            -webkit-mask: var(--red-triangle) no-repeat bottom left;
            mask: var(--red-triangle) no-repeat bottom left;
            animation: red-triangle-animation 9.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            background-color: rgb(233, 66, 53);
            bottom: 15%;
            height: 74px;
            left: 12%;
            width: 65px;
        }
        .yellow-dots {
            --yellow-dots: url('');
            -webkit-mask: var(--yellow-dots) no-repeat top left;
            mask: var(--yellow-dots) no-repeat top left;
            background-color: rgb(253, 214, 99);
            height: 57px;
            left: 13%;
            top: 18%;
            width: 76px;
        }
        @keyframes yellow-semicircle-animation {
            40% {
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transform: translateY(40px) rotate(-1deg);
            }
        }
        .yellow-semicircle {
            --yellow-semicircle: url('');
            -webkit-mask: var(--yellow-semicircle) no-repeat top right;
            mask: var(--yellow-semicircle) no-repeat top right;
            animation: yellow-semicircle-animation 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            background-color: rgb(250, 207, 76);
            height: 171px;
            right: 28.5%;
            top: -50px;
            transform: rotate(-7deg);
            width: 211px;
        }
        @keyframes expand{
            from{
                transform: scale(0);
            }to{
                transform: scale(1);
            }
        }
        ripple{ /*It might not be always in a container*/
            opacity: var(--ripple-opacity, .25);
            background: currentcolor;
            display: block;
            border-radius: 50%;
            position: absolute;
            animation: 1s expand cubic-bezier(.1, .9, .1, .9);
        }
        .map{
            width: 100%;
            height: 100%;
        }
        html,body {
            height: 100%;
            width: 100%;
        }
</head>
<body class="mdui-theme-primary-teal">
    <aside class="background fade-in is">
        <span class="blue-circle-container"></span>
        <span class="green-rectangle"></span>
        <span class="grey-oval"></span>
        <span class="grey-rounded-rectangle"></span>
        <span class="red-triangle"></span>
        <span class="yellow-dots"></span>
        <span class="yellow-semicircle"></span>
    </aside>
    {% block body %}{% endblock %}
    <script
        src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
        integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
        crossorigin="anonymous"
    ></script>
</body>